<template>
  <div class="timeDowns">
    <span class="kk">{{ hours }}</span>
    <span class="o">:</span>
    <span class="kk">{{ minutes }}</span>
    <span class="o">:</span>
    <span class="kk">{{ seconds }}</span>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    start: {
      type: String,
      default: "",
    },
    end: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      timer: null,
      times: 0,
      hours: "00",
      minutes: "00",
      seconds: "00",
    };
  },
  mounted() {
    this.timeDown();
  },
  methods: {
    timeDown() {
      // 倒计时
      console.log("倒计时", this.start, this.end);
      clearInterval(this.timer);
      let star = this.start;
      let end = this.end;
      let starttime = new Date(star.replace(/-/g, "/")) / 1000;
      let nowDate = Math.round(new Date() / 1000); // 当前时间
      //let endtime = Number(this.initActiveMsgObj.end_time);
      let endtime = new Date(end.replace(/-/g, "/")) / 1000;
      // endtime = Math.round(new Date('2019/7/10 14:56:00') / 1000); + 60;
      if (endtime < nowDate) {
        return;
      }

      let totalSeconds = parseInt(endtime - nowDate); // 相差的总秒数
      //天数
      // let days = Math.floor(totalSeconds / (60 * 60 * 24));
      //取模（余数）
      // let modulo = totalSeconds % (60 * 60 * 24);
      let modulo = totalSeconds;
      //小时数
      let hours = Math.floor(modulo / (60 * 60));
      hours = hours < 10 ? "0" + hours : hours;
      modulo = modulo % (60 * 60);
      //分钟
      let minutes = Math.floor(modulo / 60);
      minutes = minutes < 10 ? "0" + minutes : minutes;
      //秒
      let seconds = modulo % 60;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      //输出到页面
      this.hours = hours;
      this.minutes = minutes;
      this.seconds = seconds;
      this.times = hours + ":" + minutes + ":" + seconds;
      //if(totalSeconds <= 0){
      if (totalSeconds <= 60) {
        clearInterval(this.timer);
        // window.location.reload()
      } else {
        this.timer = setInterval(this.timeDown, 1000);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.timeDowns {
  .kk {
    display: inline-block;
    vertical-align: middle;
    width: auto;
    background:  #333333;
    // border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 400;
    color: #ffffff;
  }
  .o {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0.5rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
  }
}
</style>
